<template>
    <div id="tiezi">
        <div><button @click="btnclick">写帖</button></div>
    <div id="content">
        <div v-for="(item,i) in list" @click="divclick(item,i)" :id="i" class="item"> <div>{{item.title}}</div>  <div>{{gettime(Number(item.lastupdate))}}</div></div>
    </div>
     <router-view> </router-view>

    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        name: "Tiezi",
        data(){
            return{
                list:[]
            }
        },
        computed:{
            gettime(){
                return(stamp)=>{
                    return new Date(stamp).format("yyyy-MM-dd hh:mm:ss");
                }

            }
        },
        methods:{
            btnclick(){
              this.$router.push("/editor");
            },
            divclick:function (item,a) {
                var tt=document.getElementById(a)
                console.log( tt.style.color);
               if (tt&&tt.style.color!="pink"){
               tt.style.color="pink";
               } else {
                   tt.style.color="red";
               };
               this.$router.push({
                   path:"/tiezi/detail",
                   query:{
                       id:item.id
                   }

               })

            }
        },
        mounted(){

            axios({
                methods:'get',
                url:'http://localhost:8085/tiezi/get'
            }).then(res=>{
                console.log(res)
                this.list=res.data.data;

            })
        }
    }
    Date.prototype.format = function(fmt){
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "h+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };

        if(/(y+)/.test(fmt)){
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }

        for(var k in o){
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(
                    RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }

        return fmt;
    }
</script>

<style scoped>
#tiezi{
    width: 60vw;
    margin: 30px auto;
}
    .item{
        font-size: 20px;
        border: 1px solid black;
        margin: 5px 0;
        display: flex;
        justify-content: space-between;
    }
    .item:hover{
        transform: scale(1,1.2);
        transition: all 0.3s;
        background-color: pink;
        cursor: pointer;
        
    }
</style>